<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>controller</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery-1.10.2.js"></script>
    <script src="../lib/angularjs/angular.min.js"></script>
    <style>
        body{padding:50px 200px;}
    </style>
    <script>
        var app=angular.module("app01",[]);
    </script>
</head>
<body ng-app="app01">
<h3>编译函数负责对模板dom进行转换，链接函数负责作用域与dom进行链接</h3>
<DIV CLASS="panel panel-success">
    <div class="panel-heading">例子一</div>
    <div class="panel-body">
        <div ng-controller="MainCtrl">
            <input type="text" ng-model="color" placeholder="Enter a color" />
            <hello-world/>
        </div>
    </div>
    <script>
        app.controller('MainCtrl', function($scope) {
            $scope.color='red';
        });
        app.directive('helloWorld',function(){
            return{
                restrict: 'AE',
                replace: true,
                template: '<p style="background-color:{{color}}">Hello World</p>',
                link: function(scope,elem,attrs){
                    elem.bind('click',function(){
                        elem.css('background-color','white');
                        scope.$apply(function(){
                            scope.color="white";
                        });
                    });
                    elem.bind('mouseover',function(){
                        elem.css('cursor','pointer');
                    });
                }
            }
        });
    </script>
    <div class="panel-footer">
        scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。
        elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
        attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在 link 函数中通过 attrs.someAttribute 来使用它。
        link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片段中，我们添加了两个事件， click，和 mouseover。click 处理函数用来重置 <p> 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。 这个 plunker 演示了这些概念。
    </div>
</DIV>
</body>
</html>
